<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JSONP的实践</title>
</head>
<body>
<button id="btn">点击发送跨域请求</button>
<div id="box"></div>
<script>

    // 解决跨域的方式
    // 1.jsonp
    // 2.设置cors响应头
    // 3.使用用户代理

    // 获取元素
    let btn = document.querySelector('#btn')
    let box = document.querySelector('#box')
    let script = null;

    // 4.定义一个回调函数 用来接收后端传输过来的数据
    function bbb(data){
        console.log(data)

        box.innerHTML = data.name;

    }

    btn.onclick = function(){
        //解决每次点击都会添加script的判断
        if(script){
            script.remove();
        }
        
        // 发送请求
        // 1.创建script标签
        script = document.createElement('script')
        // 2.给script标签设置 src属性    属性值是我们发送请求的目标地址
        script.src = 'http://127.0.0.1:8090/server?callback=bbb'
        // 3.把script标签追加到页面中
        document.body.appendChild(script)

    }

</script>
</body>
</html>